<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时炸弹</title>
</head>
<body>
<!--整个边框-->
<div id="big">
    <!--灯-->
    <div id="d">

    </div>
    <!--计时器边框-->
    <div id="jsq">
        00:00:20
    </div>
</div>
<!--创建三个选择的边框-->
<div id="line">
    <button id="r"></button>
    <button id="g"></button>
    <button id="b"></button>
</div>
<script src="jquery.min.js"></script>
<script>
    $("#big").css({
        "width":"300px",
        "height":"200px",
        "border":"2px black solid",
        "margin":"80px auto"
    });
    $("#d").css({
        "width":"30px",
        "height":"30px",
        "background-color":"red",
        "border-radius":"50%",
        "float":"right"
    });
    $("#jsq").css({
        "width":"200px",
        "height":"90px",
        "border":"2px black solid",
        "margin":"50px auto",
        "font-size":"50px",
        "text-align":"center",
        "line-height":"90px"
    });
    $("#line").css({
        "width":"100px",
        "height":"50px",
        "margin":"-120px auto"
    });
    $("#r").css({
        "width":"30px",
        "height":"30px",
        "background-color":"red"
    });
    $("#g").css({
        "width":"30px",
        "height":"30px",
        "background-color":"green"
    });
    $("#b").css({
        "width":"30px",
        "height":"30px",
        "background-color":"blue"
    });

    //计时器停止函数
    function stop() {
        clearInterval(jsq_interval); // 停止计时器
        clearInterval(d_interval) // 停止灯闪烁
    }
    //炸弹爆炸函数
    function boom() {
        $("#big").html("<img src='picb.png' style='width: 300px;height: 200px'>"); //通过innerHTML添加img标签，来添加图片
        $('#r').css('display','none');
        $('#g').css('display','none');
        $('#b').css('display','none');
        stop()
    }
    //计时器
    var number = 20;
    var jsq = $("#jsq")[0];
    var jsq_interval = setInterval(
        function () {
            if(number>=10){ //判断number是不是大于10的，是不做改变
                jsq.innerText = "00:00:"+number;
                number-=1
            }else if(number==0){
                stop();
                boom()
            }else { //判断number是不是小于10的，修改事件格式
                jsq.innerText = "00:00:0"+number;
                number-=1
            }
        },1000
    );
    //灯
    var d = $("#d")[0];
    var d_interval = setInterval(
        function () {  //闪灯的功能函数
            if(d.style.backgroundColor=="red"){ //判断如果背景颜色是red，执行下面的代码
                d.style.backgroundColor="white"
            }else{ //判断如果背景颜色不是red，执行的代码
                d.style.backgroundColor="red"
            }
        },500
    );
    //  点红灯爆炸
    $("#r").click(
        function () {
        boom()
        }
    );
    //点绿灯拆除
    $("#g").click(
        function () {
        stop()
        }
    );
    //点蓝灯，缩短时间
    $("#b").click(
        function () {
        number=8
        }
    )

</script>
</body>
</html>